<template>
  <view class="container round">
    <h1 class="span-top title">&nbsp;&nbsp;置顶活动</h1>
    <div class="content span-top round underline" v-for="(item, index) in newsItems" :key="index">
      <div class="cont-img">
        <image src="@/static/testImage.jpg"></image>
      </div>
      <div class="content-text">
        <h1 class="headeline">{{ item.headeline }}</h1>
        <p class="more">{{ item.description }}</p>
        <p class="date">{{ item.date }}</p>
      </div>
    </div>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const newsItems = ref([
  {
    imageUrl: '@/static/testImage.jpg',
    headeline: '能源空天研究院成功举办首届学术研讨会',
    description: '探讨油气资源勘探与空天信息技术的融合发展技术展技术的融合发展',
    date: '2025-03-15'
  },
  {
    imageUrl: '@/static/testImage.jpg',
    headeline: '能源空天研究院成功举办首届学术研讨会',
    description: '探讨油气资源勘探与空天信息技术的融合发展技术展技术的融合发展',
    date: '2025-03-15'
  }
]);
</script>

<style scoped>
.container {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
  border-left: 5px solid rgb(30, 66, 159);
  color: rgb(30, 66, 159);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.round {
  border-radius: 10px;
}

.span-top {
  margin-top: 10px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.cont-img {
  width: 80px;
  height: 80px;
  background-color: orange;
}

.cont-img image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.content-text {
  flex: 1;
}

.headeline, .more, .date {
	display: -webkit-box;
	  -webkit-line-clamp: 2; /* 显示行数 */
	  -webkit-box-orient: vertical;
	  overflow: hidden; /* 超出部分隐藏 */
	  text-overflow: ellipsis;
}
.more, .date {
	font-size: 13px;
	color: rgb(156, 163, 175);
}
</style>